<template>
	<view class="">
		<view class="" v-for="(item,index) in 3" :key="index">
			<view style="text-align: center;">
				<text class="time">2023-02-24 14:41:14</text>
			</view>
			<view class="message-box">
				<view class="message-title">系统消息</view>
				<view class="message-des">测试测试测试</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			systemBarHeight: 0,
			list: []
		};
	},
	onLoad() {},
	onShow() {
	},
	methods: {
		
	}
};
</script>

<style>
page {
	background-color: #f3f4f6;
}
</style>

<style lang="scss" scoped>
.time {
	background-color: #cccccc;
	color: #ffffff;
	display: inline-block;
	padding: 5rpx 20rpx;
	font-size: 24rpx;
	border-radius: 10rpx;
	margin: 20rpx auto;
}
.message-box {
	width: 640rpx;
	padding: 20rpx 27rpx;
	background-color: #fff;
	margin: 20rpx auto;
	border-radius: 20rpx;
	margin-bottom: 25rpx;
	font-size: 24rpx;
	color: #666666;
	.message-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		color: #111111;
	}
	.message-des{
		max-width: 610rpx;
		font-family: 'SourceHanSansCN-Regular';
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}
</style>
